/**
 * 渠道发布，发布记录
 */

import React from 'react';
import { Icon, Table, Form, Input, DatePicker, Button } from 'antd';
import { router, withRouter } from 'umi';
import { Pagination } from '@/components';
import { useRequest } from '@/hooks';
import { getRecruitOutwardsChannelRecords } from '@/service';

function HistoryPublish({ form, location }) {
    const { query = {} } = location;
    const { data, loading, run } = useRequest(getRecruitOutwardsChannelRecords, { manual: true });
    const dataSource = data?.data?.rows;
    const total = data?.data?.total;

    React.useEffect(() => {
        const { orderByField = '' } = query;
        run({ ...query, orderByField: orderByField.replace('end', '') });
    }, [query]);

    const columns = [
        {
            title: '岗位',
            dataIndex: 'postName'
        },
        {
            title: '渠道',
            dataIndex: 'channelName'
        },
        {
            title: '类型',
            dataIndex: 'channelType',
            filteredValue: query.channelType,
            filters: [
                {
                    value: '1',
                    text: '内部渠道'
                },
                {
                    value: '2',
                    text: '外部渠道'
                },
                {
                    value: '3',
                    text: '猎头公司'
                }
            ]
        },
        {
            title: '操作',
            dataIndex: 'operate',
            filteredValue: query.operate,
            filters: [
                {
                    value: '1',
                    text: '发布'
                },
                {
                    value: '2',
                    text: '刷新'
                },
                {
                    value: '3',
                    text: '上线'
                },
                {
                    value: '4',
                    text: '下线'
                }
            ]
        },
        {
            title: '操作人',
            dataIndex: 'operateUserName'
        },
        {
            title: '账号',
            dataIndex: 'operateAccount'
        },

        {
            title: '时间',
            dataIndex: 'operateTime',
            sortOrder: query.orderByField ? query.orderByField.split('_')[1] : undefined,
            sorter: () => {}
        },
        {
            title: '操作',
            key: 'action',
            render: record => (
                <Icon
                    type="solution"
                    onClick={() => {
                        history.push({
                            pathname: '/office/personnelManagement/recruitment/channel/detail',
                            query: {
                                channelId: record.channelId,
                                outwardId: record.outwardId,
                                channelCode: record.channelCode
                            }
                        });
                    }}
                />
            )
        }
    ];

    const handlePaginationChange = pagination => {
        const { current, pageSize } = pagination;
        history.push({ query: { ...query, pageNo: current, pageSize } });
    };

    const handleTableChange = (_, filters = {}, sorter) => {
        const { channelType, operate } = filters;
        const { field, order } = sorter;
        history.push({ query: { ...query, channelType, operate, orderByField: order ? `${field}_${order}` : '' } });
    };

    const handleSubmit = e => {
        e.preventDefault();
        form.validateFields((err, values) => {
            if (!err) {
                history.push({ query: { ...query, ...values } });
            }
        });
    };

    return (
        <>
            <Form layout="inline" onSubmit={handleSubmit} style={{ marginBottom: 16 }}>
                <Form.Item label="岗位">
                    {form.getFieldDecorator('a')(<Input style={{ width: 160 }} placeholder="请输入" />)}
                </Form.Item>
                <Form.Item label="操作人">
                    {form.getFieldDecorator('b')(<Input style={{ width: 160 }} placeholder="请输入" />)}
                </Form.Item>
                <Form.Item label="账号">
                    {form.getFieldDecorator('c')(<Input style={{ width: 160 }} placeholder="请输入" />)}
                </Form.Item>
                <Form.Item label="时间">
                    {form.getFieldDecorator('d')(<DatePicker.RangePicker style={{ width: 240 }} />)}
                </Form.Item>
                <Form.Item>
                    <Button type="primary" htmlType="submit">
                        搜索
                    </Button>
                </Form.Item>
            </Form>
            <Table
                rowKey="channelId"
                columns={columns}
                dataSource={dataSource}
                pagination={false}
                onChange={handleTableChange}
            />
            <Pagination
                current={query.pageNo}
                pageSize={query.pageSize}
                loading={loading}
                total={total}
                onChange={handlePaginationChange}
            />
        </>
    );
}

export default withRouter(Form.create()(HistoryPublish));
